<script setup lang="ts">
import { ref } from 'vue'

const pets = ref(['猫', '狗', '仓鼠', '鸭子', '羊驼'])

const person = ref({
  name: 'jack',
  age: 18,
  friend: 'rose',
})
</script>

<!-- 结构 -->
<template>
  <h2>小黑宠物店</h2>
  <!-- <ul>
    <li v-for="(item, index) in pets" :key="index">{{ item }} --- {{ index + 1 }}</li>
  </ul> -->

  <ul>
    <!-- 下标用不上,可以省略不写 -->
    <!-- <li v-for="item in pets" :key="item">
      {{ item }}
    </li> -->

    <!-- 循环对象
      第一项: 属性值
      第二项: 键
       -->
    <!-- <li v-for="(item, key) in person" :key="item">{{ item }} -- {{ key }}</li> -->

    <!-- 基于数字 生成列表
         开发初期 填充界面 -->
    <li v-for="item in 10" :key="item"><a href="#">kunkun</a><button>按钮</button></li>
  </ul>
</template>

<!-- 样式 -->
<style scoped></style>
